* {
  margin: 0;
  padding: 0;
}
body {
  /* 最小都是全屏 */
  /* min-height: 100vh; */
  /* 背景图片尽量适应页面且不会滚动 */
  background-image: url('../img/tp2.jpg');
  background-attachment: fixed;
  background-size: cover;
  background-position: center center;
  /* height: 100vh; */
  /* 背景渐变 */
  /* background: linear-gradient(200deg,#ddd6f3,#faaca8); */
}
/* 三个元素都需要弹性布局,所以写在一起 */
body,
.navbar,
.navbar ul {
  /* margin-top: 1rem; */
  display: flex;
  /* justify-content: center; */
  align-items: center;
}
.navbar {
  /* width: 40rem; */
  margin-top: 3rem;
  margin-left: 3rem;
  position: relative;
  padding: 20px;
  background-color: #fff;
  border-radius: 50px;
  opacity: 0.5;
}
/* spen鼠标样式 */
.sb {
  cursor: pointer;
}
.navbar input {
  width: 40px;
  height: 40px;
  /* 这里我们设置把复选框不透明设置为0,直接变透明 */
  opacity: 0;
  /* 鼠标变小手 */
  cursor: pointer;
}
.navbar span {
  position: absolute;
  left: 25px;
  width: 30px;
  height: 4px;
  /* 现在将两条线放到一起,然后单独设置第二条线的位置,calc方法可以自动计算数值 */
  top: calc(50% - 10px);
  border-radius: 15px;
  background-color: #999;
  /* 现在span覆盖着复选框,鼠标放到span上是点不中复选框的,下面这个属性就可以解决这个问题,即使
  鼠标放到span上点击也能选中或取消选中复选框 */
  pointer-events: none;
  /* 收回来的时候过渡刚好是相反的 */
  transition: transform 0.3s ease-in-out, top 0.3s ease-in-out 0.3s;

}
/* 因为第二条线在navbar这个元素内的第三个位置,所以这里写3 */
.navbar span:nth-child(3) {
  top: calc(50% + 6px);
}
.navbar ul {
  width: 0;
  /* 溢出隐藏 */
  overflow: hidden;
  /* 在这里加个过渡,可以让展开和收起自然一些 */
  transition: all 0.5s;
  /* 这个问题是因为文字被换行显示了,两个汉子竖着排列了,
  下面这个属性就可以解决这个问题,让蚊子不换行显示 */
  white-space: nowrap;
}
.navbar ul li {
  list-style: none;
  margin: 0px 15px;
}

.navbar ul li a {
  text-decoration: none;
  font-size: 20px;
  font-weight: 700;
  color: #333;
  
}

.navbar ul li a:hover {
  color: #fb7299;
}

/* :checked是当复选框被选中的时候, ~ 这是兄弟选择器,查找同一级的ul */
.navbar input:checked ~ ul {
  width: 500px;
}
.navbar input:checked ~ span:nth-child(2) {
  top: calc(50% - 2px);
  transform: rotate(-45deg);
  background-color: #fb7299;
  /* 这里先执行top然后0.3秒只想transform */
  transition: top 0.3s ease-in-out, transform 0.3s ease-in-out 0.3s;
}
.navbar input:checked ~ span:nth-child(3) {
  top: calc(50% - 2px);
  transform: rotate(45deg);
  background-color: #fb7299;
  transform: top 0.3s ease-in-out, transform 0.3s ease-in-out 0.3s;
}

.main-box {
  width:50rem;
  height: 10px;
  margin-top: 45rem;
  margin-left: 25rem;
  position: fixed;
  margin: 40rem, 50rem;
}



.ys{
  text-align: center;
  text-decoration: none;
  color: #ffffff;
  font-size: 20px;
}



.tf9 {
  /* margin: 2rem 20rem; */
  /* padding: 1rem; */
  text-align: center;
  /* border: 1px solid #ff0000; */
  /* border-radius: 1rem; */
  /* 
  infinite 表示动画无限循环
  alternate表示动画播放反向，类似呼吸效果
  */
  animation: mykey2 2s infinite alternate;
}

@keyframes mykey2 {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(2);
  }
}

